<template>
	<view class="content">
		<view class="header">
			<view class="logo"><image src="../../static/logo2.png" mode="widthFix" class="logoImg"></image></view>
			<view class="title">{{ data.channelName }}</view>
		</view>
		<view class="list">
			<div class="item" v-for="(v, k) in list" :key="k" @click="toDetail(v)">
				<div class="top">
					<div class="left">
						<template v-if="data.id == 2">
							<image src="../../static/序列号@2x.png" mode="widthFix"></image>
							<div class="text">项目{{ getChineseNumber(k) }}</div>
						</template>
						<template v-else>
							<div class="elseTitle">{{ v.title }}</div>
						</template>
					</div>
					<div class="right">
						详情
						<div class="right_arrow"></div>
					</div>
				</div>
				<div class="item_title" v-if="data.id == 2">{{ v.title }}</div>
				<div class="item_title" v-else>{{ v.subTitle }}</div>
				<div class="form" v-for="(v, k) in v.form" :key="k">
					<div class="label">{{ v.label }}</div>
					<div class="value">{{ v.value }}</div>
				</div>
			</div>
		</view>
	</view>
</template>

<script>
import fandian from '../../static/fandian.png';
import feiyi from '../../static/feiyi.png';
import jumu from '../../static/jumu.png';
import lvxing from '../../static/lvxing.png';
import lvyou from '../../static/lvyou.png';
import wenwu from '../../static/wenwu.png';
import zhaoshang from '../../static/zhaoshang.png';
export default {
	data() {
		return {
			// title: 'Hello'
			list: [],
			data: ''
		};
	},
	onLoad(e) {
		this.data = JSON.parse(e.data);
	},
	onShow() {
		this.init();
	},
	methods: {
		init() {
			this.$http('/contents?apiKey=533341d2-15bc-4719-bff5-da8cf25e9a71', 'post', { siteId: 1, channelId: this.data.id }).then(({ data }) => {
				this.list = data.contents;
				for (let x of this.list) {
					x.form = [];
					let arr = x.summary.split(';');
					for (let a of arr) {
						let obj = {};
						let arr2 = a.split(':');
						obj.label = arr2[0];
						obj.value = arr2[1];
						x.form.push(obj);
					}
				}
			});
		},
		toDetail(v) {
			uni.navigateTo({
				url: './detail2?channelId=' + v.channelId + '&id=' + v.id
			});
		},
		getChineseNumber(v) {
			switch (v) {
				case 0:
					return '一';
				case 1:
					return '二';
				case 2:
					return '三';
				case 3:
					return '四';
				case 4:
					return '五';
				case 5:
					return '六';
				case 6:
					return '七';
				case 7:
					return '八';
				case 8:
					return '九';
				case 9:
					return '十';
				case 10:
					return '十一';
				case 11:
					return '十二';
				case 12:
					return '十三';
				case 13:
					return '十四';
				case 14:
					return '十五';
				case 15:
					return '十六';
				case 16:
					return '十七';
				case 17:
					return '十八';
				case 18:
					return '十九';
				case 19:
					return '二十';
				case 20:
					return '二一';
				case 21:
					return '二二';
				case 22:
					return '二三';
				case 23:
					return '二四';
				case 24:
					return '二五';
				case 25:
					return '二六';
				case 26:
					return '二七';
				case 27:
					return '二八';
				case 28:
					return '二九';
				case 29:
					return '三十';
			}
		}
	}
};
</script>

<style scoped lang="scss">
.content {
	width: 100%;
	height: 100vh;
	background-image: url(../../static/bg.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	display: flex;
	overflow: hidden;
	flex-direction: column;
}
.header {
	padding: 20rpx;
}
.elseTitle {
	font-size: 40rpx;
	font-weight: 600;
	margin-right: 180rpx;
}
.logo {
	text-align: right;
	margin: 30rpx 40rpx 10rpx;
	.logoImg {
		width: 160rpx;
	}
}
.title {
	text-align: center;
	font-family: ss;
	font-size: 106rpx;
	color: #fff;
	margin: 20rpx 0;
}
.list {
	flex: 1;
	text-align: center;
	width: 80%;
	margin: 0 auto;
	overflow-y: scroll;
	.item {
		margin: 20rpx auto;
		border: 10rpx solid #009cff;
		border-radius: 30rpx;
		background-color: rgba(255, 255, 255, 0.7);
		padding: 10rpx 20rpx;
		.top {
			position: relative;
			display: flex;
			align-items: center;
			text-align: left;
			.left {
				position: relative;
				width: 100%;
				image {
					width: 200rpx;
				}
				.text {
					font-size: 32rpx;
					font-weight: 600;
					position: absolute;
					z-index: 99;
					color: #fff;
					left: 40rpx;
					top: 16rpx;
				}
			}
			.right {
				margin-right: 10rpx;
				font-weight: 600;
				font-size: 32rpx;
				position: absolute;
				width: 120rpx;
				text-align: right;
				right: 0;
				// font-size: ;
				color: #009cff;
				display: flex;
				align-items: center;
				.right_arrow {
					margin-left: 10rpx;
					width: 0rpx;
					height: 0rpx;
					border-style: solid;
					border-width: 16rpx;
					border-color: transparent transparent transparent #009cff;
				}
			}
		}
		.item_title {
			font-size: 32rpx;
			text-align: left;
			font-weight: 600;
			padding: 0 10rpx;
		}
		.form {
			font-size: 32rpx;
			font-weight: 600;
			margin: 20rpx 10rpx;
			display: flex;
			text-align: left;
			.label {
				margin-right: 20rpx;
				width: 200rpx;
			}
			.value {
				flex: 1;
			}
		}
	}
}
</style>
